
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          [
            ["Name", "preproc","language_model","prediction_head"],
            ["BERT-base (irrelevant)", 8.7348466796875,16.9350302734375,93.34227734375],
            ["BERT-base (relevant)", 8.72920361328125,17.01487744140625,0.6795068359375023],
            ["MiniLM (irrelevant)", 11.3310205078125,5.710112304687506,68.3330791015625],
            ["MiniLM (relevant)", 11.351005859375,5.700729980468751,1.5442099609375006],
            ["RoBERTa-base (irrelevant)", 11.422080566406253,14.346810058593748,1.2042656250000014],
            ["RoBERTa-base (relevant)", 11.39172119140625,14.487136230468751,1.0287207031250034],
            ["BERT-large (irrelevant)", 8.57398193359375,44.95627490234374,1.134274414062503],
            ["BERT-large (relevant)", 8.494043945312502,45.1757705078125,0.9535410156250066],
            ["XLMR-large (irrelevant)", 6.914632568359375,48.34647045898438,0.7067622070312467],
            ["XLMR-large (relevant)", 6.85790966796875,48.516737792968755,0.8400478515624954],
          ]);

        var options = {
          chart: {
            title: 'Reader Performance',
            subtitle: 'Time and Accuracy Benchmarks',
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}

        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

